<template>
  <header class="b-header_box">
    <div class="box_center">
      <img class="loginImg" src="../assets/img/logo.png" alt="logo">
      <img class="logoText" src="../assets/img/logoText.png" alt="logo-text">
      <ul>
        <li
          v-for="item in navList"
          :key="item.value"
          @click="handleClick(item)"
          @mouseenter="item.isShowPull = true"
          @mouseleave="item.isShowPull = false"
        >
          {{item.label}}
          <img src="../assets/img/arrow.png" v-if="item.label==='文件'">
          <div class="pullbox" v-show="item.isShowPull">
            <div class="pull-item" v-for="val in item.child" :key="val.title">{{val.title}}</div>
          </div>
        </li>
      </ul>
      <div class="avatar" v-if="isLogin"></div>
      <div class="language" @mouseenter="isShowPullbox = true" @mouseleave="isShowPullbox = false">
        {{language==="cn"?"中文":"English"}}
        <img
          src="../assets/img/arrow.png"
          :class="{activeArrow: isShowPullbox}"
        >
        <div class="pullbox" v-show="isShowPullbox">
          <label>
            <input type="radio" v-model="language" value="cn">
            <span>中文</span>
          </label>
          <label>
            <input type="radio" v-model="language" value="en">
            <span>English</span>
          </label>
        </div>
      </div>
      <button class="login" @click="$parent.isShowLoginDialog = true">登录</button>
    </div>
  </header>
</template>

<script>
export default {
  data() {
    return {
      isLogin: false, // 是否已登录
      language: "cn", // 所选语言
      isShowPullbox: false, // 是否显示选择语言下拉框
      isShowFilebox: false, // 是否显示文件下拉框
      navList: [
        {
          label: "项目简介",
          value: "projectDesc",
          scrollId: "projectDesc"
        },
        {
          label: "通证介绍",
          value: "pass",
          scrollId: "pass"
        },
        {
          label: "路线图",
          value: "routeMap",
          scrollId: "routeMap"
        },
        {
          label: "文件",
          value: "file",
          isShowPull: false,
          child: [
            {
              title: "白皮书"
            },
            {
              title: "BM18协议"
            }
          ]
        },
        {
          label: "常见问题",
          value: "question",
          scrollId: "question"
        },
        {
          label: "联系我们",
          value: "contact",
          scrollId: "contact"
        }
      ]
    };
  },
  methods: {
    login() {
      this.$parent.isShowLoginDialog = true;
    },
    getElement() {
      if (document.documentElement && document.documentElement.scrollTop) {
        return document.documentElement;
      }
      return document.body;
    },
    scrollTo(idName) {
      if (document.documentElement.scrollTop == 0) {
        document.documentElement.scrollTop = 1;
      }
      const doc = this.getElement();
      const current = doc.scrollTop;
      const targetOffset = document.getElementById(idName).offsetTop;
      requestAnimationFrame(function move() {
        let scrollTop = doc.scrollTop;
        scrollTop += targetOffset/30;
        if (scrollTop >= targetOffset) {
          doc.scrollTop = targetOffset;
          cancelAnimationFrame(move);
          return;
        }
        doc.scrollTop = scrollTop;
        requestAnimationFrame(move);
      });
    },
    handleClick(item) {
      if (item.scrollId) {
        this.scrollTo(item.scrollId);
      }
    }
  }
};
</script>

<style lang="scss">
@import "../assets/style/header.scss";
</style>
